<!-- 首页 -->
<template>
	<view style="background-color: #ffffff;">

		<cu-custom bgColor="bg-gradual-them" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">猫咪识别</block>
		</cu-custom>


		<u-notice-bar mode="horizontal" :list="listBar" :is-circular="true" ></u-notice-bar>

		<view>


			<!-- 图片上传 -->

			<!-- :size-type="['compressed']" -->
			<view class="mystyle_1">
				<view>
					<u-upload ref="uUpload" :max-size="5 * 1024 * 1024" :max-count="1" :action="action"
						:auto-upload="false" :width="400" :height="400">
					</u-upload>
				</view>
			</view>


			<!-- 打开弹窗 -->
			<view style="width: 85%;margin: 40rpx auto;">

				<u-button @click="open" v-show="isLoadingShow === 0" :ripple='true'>快速识别</u-button>

				<button v-show="isLoadingShow === 1" class="cu-btn block bg-blue margin-tb-sm lg">
					<text class="cuIcon-loading2 cuIconfont-spin"></text> 加载
				</button>

			</view>

		</view>


		<view class="cat-menu" v-for="(item, id) in catList" :key="id">
			<view class="cu-list menu-avatar " @click="goCatMessage(item.catId)">

				<view class="cu-item">

					<!-- 猫咪头像 -->
					<view class="cu-avatar round lg">
						<image class="cat-head" :src="item.catImg" mode="aspectFill">
						</image>
					</view>

					<!-- 猫咪类型 -->
					<view class="content">
						<view class="text-cut text-bold" style="font-size: 30rpx;">{{item.catName}}</view>
					</view>

					<view class="action">
						<view class="text-them" style="font-size: 30rpx;">{{item.similarity}}%</view>
					</view>
				</view>
			</view>

		</view>



		<view style="height: 200rpx;width: 1rpx;"></view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listBar: [
					'现在猫猫识别十分不准确，请大家多多上传猫咪的日常照片呀！❤  注意:猫咪识别的准确率依赖于大家上传的猫咪日常照片哟！❤'
				],
				action: this.recognizeCatPhoto(), // 图片上传地址

				isLoadingShow: 0,
				recentyList: [],
				catList: [
					// {
					// 	catId: 1,
					// 	catImg: 'https://i1.hdslb.com/bfs/face/26a99c8b140a6b74cdccc2d942475988e8b0183f.jpg',
					// 	catName: '小奶猫',
					// 	similarity: '51.9',
					// },
					// {
					// 	catId: 1,
					// 	catImg: 'https://i1.hdslb.com/bfs/face/26a99c8b140a6b74cdccc2d942475988e8b0183f.jpg',
					// 	catName: '小奶猫',
					// 	similarity: '51.9',
					// }
				],


			}
		},
		onLoad() {
			//发送查询请求
			this.getmessageData()
		},
		methods: {
			// 跳转猫咪详情
			goCatMessage(id) {
				uni.navigateTo({
					url: '../catView/message?id=' + id,
				});
			},


			// 识别
			open() {
				//确认无误后，上传图片
				this.$refs.uUpload.upload()

				this.isLoadingShow = 1

				//设置定时器 【2秒后再执行后面的，确保后端传回了 url】
				this.timer = setTimeout(() => {

					this.recognize()
				}, 2000)

			},

			recognize() {
				// 获得图片路径
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})

				console.log(files)



				try {
					// 如果识别成功
					if (files[0].response.code == 200) {
						console.log('识别成功！')
						this.$refs.uToast.show({
							title: files[0].response.msg,
							type: 'success',
							url: ''
						})

						let catMsg = []
						// 获取id，
						for (let i = 0; i < files[0].response.data.recognizeResults.length; i++) {
							// 开始catID
							let id = files[0].response.data.recognizeResults[i].catID.replace("\"", "")

							let score = Math.abs(files[0].response.data.recognizeResults[i].score * 100)
							console.log('score:', score)
							catMsg[i] = {};
							catMsg[i].catId = Number(id)
							catMsg[i].similarity = score.toFixed(1)

							console.log(catMsg[i].catId)

							for (let j = 0; j < this.recentyList.length; j++) {
								if (catMsg[i].catId == this.recentyList[j].id) {
									catMsg[i].catImg = this.recentyList[j].catImg
									catMsg[i].catName = this.recentyList[j].catName
								}
							}
							//通过id去找到猫咪信息
							// let img = 
							// catMsg[i].catImg = this.recentyList[catMsg[i].catId].catImg
							// catMsg[i].catName = this.recentyList[catMsg[i].catId].catName

						}

						console.log('catMsg:', catMsg)
						this.catList = catMsg


						//回显猫咪信息+相似度
					} else {
						this.$refs.uToast.show({
							title: files[0].response.msg,
							type: 'error',
							url: ''
						})

					}

					this.isLoadingShow = 0
				} catch (e) {
					//TODO handle the exception
					this.$refs.uToast.show({
						title: e,
						type: 'error',
						url: ''
					})
					this.isLoadingShow = 0
				}
			},

			// 获取 猫咪资料
			getmessageData() {

				this.$u.api.loadCatInfo({}).then(res => {

					if (res.code == 200) {

						let catMsg = []

						// 如果是所有，则不需要判断
						for (var i = 0; i < res.data.length; i++) {

							catMsg[i] = {};
							catMsg[i]['catType'] = res.data[i].catType; // 猫咪类型       【根据这个进行分类】
							catMsg[i]['id'] = res.data[i].id; // 猫咪编号       【后面的跳转  根据这个进行分类     ❤❤】
							catMsg[i]['catImg'] = this.myimgurl() + res.data[i].catImg; // 猫咪照片
							catMsg[i]['catName'] = res.data[i].catName; // 猫咪昵称

						}

						this.recentyList = catMsg

						console.log("查询猫咪信息：", this.recentyList)
						// console.log("1111：",this.recentyList[0])

					}
				})


			},

		},
	}
</script>

<style lang="scss" scoped>
	/* 内容布局 start*/
	.cat-menu {
		background-color: rgba(255, 255, 255, 1);
		width: 85%;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 15rpx !important;
		margin: auto;
	}

	.cat-head {
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
	}

	.mystyle_1 {
		padding-top: 35rpx;
		position: relative;
		display: flex;
		background-color: #ffffff;
		justify-content: center;
		align-items: center;
	}
</style>
